<template>
  <d2-container>
    <el-table :data="tableData" style="width: 80%">
      <el-table-column
        prop="feedbackText"
        width="400"
        show-overflow-tooltip
        label="反馈意见"
      >
      </el-table-column>
      <el-table-column prop="imgArr" width="100" label="反馈图片">
        <template slot-scope="scope">
          <div>
            <el-carousel direction="vertical" :autoplay="false" height="100px">
              <el-carousel-item
                v-for="(item, index) in scope.row.imgArr"
                :key="index"
              >
                <el-image
                  style="width: 100%; height: 100px"
                  :src="item"
                  :preview-src-list="[item]"
                >
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :pageInfo="pageInfo"
      :total="total"
      :handleCurrentChange="handleCurrentChange"
      :handleSizeChange="handleSizeChange"
    />
  </d2-container>
</template>

<script>
import api from "@/api";
import Pagination from "@/components/Pagination/index.vue";

export default {
  components: { Pagination },
  comments: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageSize: 10,
        current: 1,
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { pageSize, current, rows, count } = await api.GET_FEEDBACK(
        this.pageInfo
      );
      this.tableData = rows;
      this.pageInfo = {
        pageSize,
        current,
      };
      this.total = count;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.current = val;
      this.fetchData();
    },
    async handleSetStatus(id, status) {
      await api.SET_RECRUIT_STATUS(id, { status });
      this.$message("修改成功");
      await this.fetchData();
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>
